<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script type="text/javascript" src="js/publicurl.js" ></script>
		<link rel="stylesheet" href="css/icons-extra.css" />
		<style>
			.mui-card{
				background: #F2F2F2;
				border: none;
			}
			.ul-box li{
				width: 32%;
				border: none;
			}
			
			#topexp .top-ul{
				list-style: none;
				background: dodgerblue;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				
			}
			#topexp .top-ul li {
				list-style: none;
				color: white;
			}
			#topexp .top-ul li  ul{
				padding: 0px;
				border: 1px solid dodgerblue;
				text-align: left;
				display: none;
				z-index: 1000;
			}
			#topexp .top-ul li  ul li{
				border-top: 1px solid dodgerblue;
				z-index: 1000;
			}
			.gender{

				background: dodgerblue;
			}
			#roomdetails p{
				margin-top: 8px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav top-header" style="line-height: 35px;">
		    <a href="javascript:history.back(-1)" style="position: absolute;">
		    	<span class="mui-icon mui-icon-arrowleft"></span>
		    	返回
		    </a>
		    <h1 class="mui-title">空余公寓</h1>
		</header>
		<div id="roomContent" class="mui-content">
			<div id="roomdetails" style="display: none; padding-left: 20px;">
				<p>
					房间号:<span id="roomNo"></span>
				</p>
				<p>
					剩余空位:<span id="bedNum"></span>
				</p>
				<p>
					房间型号:<span id="roomSize"></span>
				</p>
				<p>
					房间类型:<span id="roomType"></span>
				</p>
				<p></p>
			</div>
			<div class="mui-card">
				<div class="mui-card-header" style="padding-top: 10px;">
					<div id="topexp">
						<!--<ul class="top-ul" style="float: left;">
							<li><a href="javascript:;" id="chooseType">房间类别</a>
								<ul id="sul" style="z-index: 2000;">
									<li><a href="javascript:;">男</a></li>
									<li><a href="javascript:;">女</a></li>
								</ul>
							</li>
						</ul>-->
						<form class="layui-form" style="display: inline-block;">
							<div class="" style="margin-top: -20px;">
								<input type="radio" name="sex" value="1" title="男">
      							<input type="radio" name="sex" value="0" title="女">
      							<input type="radio" name="sex" value="2" title="待定">
							</div>
							<div class="" style="">
							<input type="text" id="empsize" placeholder="空余床铺数" style="width: 100px;height:40px;padding:5px"/>
							
							<!--<input type="radio" class="gender" name="sex"/>男
							<input type="radio" class="gender" name="sex"/>女-->
							
							<button class="" type="button" id="querybtn" style="background:#5FB878;height:40px;line-height:30px;padding: 5px; color: white;">
							  <i class="layui-icon">&#xe615;</i> 搜索
							</button>
						</div>
							
						</form>
						
					</div>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner" style="">
						<ul  class="mui-table-view mui-grid-view mui-grid-9 ul-box" id="roombox">
				           
						</ul>
					</div>
				</div>
				<div class="mui-card-footer"></div>
			</div>	
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh:{
					container:"#roomContent",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {
				      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				      height:'50px',//可选,默认50px.下拉刷新控件的高度,
				      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
				      auto: true,//可选,默认false.首次加载自动上拉刷新一次
				      callback :getRooms //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    }
				}
			});

			var url = window.location.href;
			var urlid = url.split("?")[1];
			var id = urlid.split("=")[1];
			/*条件搜索*/
			$("#querybtn").click(function() {
				var num = $("#empsize").val();
				var gender = $('input[name="sex"]:checked').val();
				layui.use(['form','layer'],function() {
				var form = layui.form;
				var layer = layui.layer;
				var regnum = /^d{1,2}$ /;
				/*if(num!=null && num.trim()!="") {
					if(!regnum.test(num)) {
						layer.msg("<span style='color:red;'>输入不合规范</span>");
						return;
					}
					
				}*/
				mui.ajax(puburl.url+"/dangxia/user/getRoomsByQuery", {
					data: {
						"gender":gender,
						"empsize":num,
						"id":id
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 5000, //超时时间设置为10秒；
					success: function(data1) {
						if(data1.code==0) {
							$("#roombox").empty();
							layer.msg(data1.msg);
							
							$.each(data1.data, function(index,d) {
								formatroom(d);
							});
							
						} else {
							layer.msg(data1.msg);
						}
					},
					error: function(xhr, type, errorThrown) { //异常处理；
						layer.msg("连接异常");
					}
				});
				
				});
			});
			function getRooms() {
				$("#roombox").empty();
				layui.use(['form','layer'],function() {
				var form = layui.form;
				var layer = layui.layer;
				mui.ajax(puburl.url+"/dangxia/user/getRoomsByBuildingId", {
					data: {
						"id":id
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 5000, //超时时间设置为10秒；
					success: function(data1) {
						if(data1.code==0) {
							layer.msg(data1.msg);
							mui("#roomContent").pullRefresh().endPulldown();
							$.each(data1.data, function(index,d) {
								formatroom(d);
							});
							
						} else {
							layer.msg(data1.msg);
							mui("#roomContent").pullRefresh().endPulldown();
						}
					},
					error: function(xhr, type, errorThrown) { //异常处理；
						layer.msg("连接异常");
						mui("#roomContent").pullRefresh().endPulldown();
					}
				});
				
				});
			}
			function formatroom(d) {
				if(d.room_type==0) {
					$("#roombox").append(
						"<li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'>"
					  +    "<a href='javascript:;' class='roomclass' id='"+d.id+"' style='color: hotpink;'>"
					  +	   "<span class='mui-icon mui-icon-home'></span>"
					  +	   		"<div class='mui-media-body'>♀"+d.room_no+"</div>"
					  +		"</a>"
					  +	"</li>"
					);
				} else if(d.room_type==1){
					$("#roombox").append(
						"<li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'>"
					  +    "<a href='javascript:;' class='roomclass' id='"+d.id+"' style='color:blue;'>"
					  +	   "<span class='mui-icon mui-icon-home'></span>"
					  +	   		"<div class='mui-media-body'>♂"+d.room_no+"</div>"
					  +		"</a>"
					  +	"</li>"
					);
				} else {
					$("#roombox").append(
						"<li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'>"
					  +    "<a href='javascript:;' class='roomclass' id='"+d.id+"' >"
					  +	   "<span class='mui-icon mui-icon-home'></span>"
					  +	   		"<div class='mui-media-body'>--"+d.room_no+"</div>"
					  +		"</a>"
					  +	"</li>"
					);
				}
			}
			$("#roombox").on("click",".roomclass",function() {
				var id = $(this).attr("id");

				$.post(puburl.url+"/dangxia/user/getRoomsByQuery",
					   {"roomId":id},
					   function(data1) {
					   	if(data1.code==0) {
					   		$("#roomNo").html(data1.data[0].room_no);
					   		$("#bedNum").html(data1.data[0].room_size-data1.data[0].people_num);
					   		$("#roomSize").html(data1.data[0].room_size);
					   		$("#roomType").html(data1.data[0].room_type==0?"女生宿舍":"男生宿舍");
					   	}else{
					   		layer.msg("获取信息失败");
					   	}
						
					 }
				);
				layui.use(['layer'],function() {
					var c1 =  layer.open({
						type:1,
						title:"房间信息",
						content:$("#roomdetails"),
						area:['200px','250px'],
						btn:['关闭'],
						yes:function() {
							layer.close(c1);
						}
					});
				});
			});
		</script>
	</body>

</html>